<template>
  <div class="plan-filing bg-background text-foreground p-4">
    <h2 class="text-2xl font-bold mb-4">公用工程安全风险监测</h2>
    <!-- Action Buttons -->
    <div class="mb-4 space-x-2" style="display: flex;    justify-content: space-between;">
      <div>
        <el-button @click="cltabs(item)" :type="item.name == tabledata ? 'primary' : ''" v-for="(item) in tablearr"
          :key="item">{{ item.name }}</el-button>
      </div>
      <div>
        <el-button @click="exportData(planData, `风险监测-${tabledata}`)">导出</el-button>
      </div>
    </div>

    <!-- Data Table -->
    <div class="bg-card text-card-foreground my-6 rounded shadow-md">
      <el-table v-loading="loading" :data="displayedPlanData" style="width: 100%" ref="table" align="center"
        class="data-table" :header-cell-style="headerCellStyle">

        <el-table-column prop="company" label="机构/企业" header-align="center" align="center"></el-table-column>
        <!--  -->
        <el-table-column v-if="tabledata == '水'" prop="PH" label="水质PH值" header-align="center"
          align="center"></el-table-column>
        <el-table-column v-if="tabledata == '水'" prop="NTU" label="浊度（NTU）" header-align="center"
          align="center"></el-table-column>
        <el-table-column v-if="tabledata == '水'" prop="CL" label="氯含量（mg/L）" header-align="center"
          align="center"></el-table-column>
        <el-table-column v-if="tabledata == '水'" prop="CFU" label="细菌总数（CFU/ml）" header-align="center"
          align="center"></el-table-column>
        <el-table-column v-if="tabledata == '水'" prop="Heavy_metal" label="重金属含量（mg/L）" header-align="center"
          align="center"></el-table-column>
        <el-table-column v-if="tabledata == '水'" prop="Traffic" label="流量（T/h）" header-align="center"
          align="center"></el-table-column>
        <el-table-column v-if="tabledata == '水'" prop="Water_cost" label="耗水量/万立方米" header-align="center"
          align="center"></el-table-column>
        <!--  -->
        <el-table-column v-if="tabledata == '污水'" prop="COD" label="COD (mg/L)" header-align="center"
          align="center"></el-table-column>
        <el-table-column v-if="tabledata == '污水'" prop="NH3_N2" label="氨氮 (mg/L)" header-align="center"
          align="center"></el-table-column>
        <el-table-column v-if="tabledata == '污水'" prop="Phosphorus" label="总磷（mg/L）" header-align="center"
          align="center"></el-table-column>
        <el-table-column v-if="tabledata == '污水'" prop="NX" label="总氮（mg/L）" header-align="center"
          align="center"></el-table-column>
        <el-table-column v-if="tabledata == '污水'" prop="ph_sewage" label="pH值" header-align="center"
          align="center"></el-table-column>
        <el-table-column v-if="tabledata == '污水'" prop="Liquid_level" label="液位（M）" header-align="center"
          align="center"></el-table-column>
        <el-table-column v-if="tabledata == '污水'" prop="Reclaimed_water_rate" label="中水回用率（%）" header-align="center"
          align="center"></el-table-column>
        <!--  -->
        <el-table-column v-if="tabledata == '电力'" prop="Voltage_current" label="电压水平（V）" header-align="center"
          align="center"></el-table-column>
        <el-table-column v-if="tabledata == '电力'" prop="Electric_current" label="电流水平（A）" header-align="center"
          align="center"></el-table-column>
        <el-table-column v-if="tabledata == '电力'" prop="Power" label="功率因数" header-align="center"
          align="center"></el-table-column>
        <el-table-column v-if="tabledata == '电力'" prop="Fre" label="频率(Hz)" header-align="center"
          align="center"></el-table-column>
        <el-table-column v-if="tabledata == '电力'" prop="Voltage_flu" label="电压波动 (%)" header-align="center"
          align="center"></el-table-column>
        <el-table-column v-if="tabledata == '电力'" prop="Wire" label="耗电量/万千瓦时" header-align="center"
          align="center"></el-table-column>
        <!--  -->
        <el-table-column v-if="tabledata == '天然气'" prop="Gas_concentration" label="气体浓度（ppm）" header-align="center"
          align="center"></el-table-column>
        <el-table-column v-if="tabledata == '天然气'" prop="Pressure" label="压力（psi）" header-align="center"
          align="center"></el-table-column>
        <el-table-column v-if="tabledata == '天然气'" prop="Gas_tempreture" label="温度（°C）" header-align="center"
          align="center"></el-table-column>
        <el-table-column v-if="tabledata == '天然气'" prop="Gas_humidity" label="湿度（%）" header-align="center"
          align="center"></el-table-column>
        <el-table-column v-if="tabledata == '天然气'" prop="Gas_cost" label="耗气量/万立方米" header-align="center"
          align="center"></el-table-column>
        <!--  -->
        <el-table-column v-if="tabledata == '供热'" prop="press" label="压力（Mpa）" header-align="center"
          align="center"></el-table-column>
        <el-table-column v-if="tabledata == '供热'" prop="degree_heat" label="温度（°C）" header-align="center"
          align="center"></el-table-column>
        <el-table-column v-if="tabledata == '供热'" prop="density" label="密度（kg/m³）" header-align="center"
          align="center"></el-table-column>
        <el-table-column v-if="tabledata == '供热'" prop="fre" label="频率（Hz）" header-align="center"
          align="center"></el-table-column>
        <el-table-column v-if="tabledata == '供热'" prop="heat_s" label="瞬时热量（GJ/h）" header-align="center"
          align="center"></el-table-column>
        <el-table-column v-if="tabledata == '供热'" prop="heat_all" label="累计量（GJ）" header-align="center"
          align="center"></el-table-column>
        <!--  -->
        <el-table-column v-if="tabledata == '有毒气体'" prop="SO2" label="二氧化硫(ppm)" header-align="center"
          align="center"></el-table-column>
        <el-table-column v-if="tabledata == '有毒气体'" prop="NOX" label="氮氧化物（ppm)" header-align="center"
          align="center"></el-table-column>
        <el-table-column v-if="tabledata == '有毒气体'" prop="HCL" label="氯化氢(ppm)" header-align="center"
          align="center"></el-table-column>
        <el-table-column v-if="tabledata == '有毒气体'" prop="CHX" label="非甲烷总烃(ppm)" header-align="center"
          align="center"></el-table-column>
        <el-table-column v-if="tabledata == '有毒气体'" prop="PM" label="颗粒物(μg/m³)" header-align="center"
          align="center"></el-table-column>
        <el-table-column v-if="tabledata == '有毒气体'" prop="NX" label="氮（ppm）" header-align="center"
          align="center"></el-table-column>
        <el-table-column v-if="tabledata == '有毒气体'" prop="Heavy_metal" label="重金属含量（μg/m³）" header-align="center"
          align="center"></el-table-column>


















        <el-table-column prop="Status" label="状态" header-align="center" align="center"></el-table-column>
      </el-table>
    </div>
    <!-- Pagination -->

    <Pagination v-if="planData.length" :tableData="planData" @alltabledata="alltabledata" />
    <!--  -->
    <el-dialog class="dialog-from" v-model="isViewDialogOpen" title="记录详情" destroy-on-close align-center
      :before-close="closeViewDialog">
      <div class="body-item">
        <div class="tablename">
          <div
            style="width: 10px; height: 10px; background-color:rgba(2, 125, 180, 1);margin-right: 10px;border:1px solid;">
          </div>
          <span>基本信息</span>
        </div>
        <div class="box-content">
          <div class="grid grid-cols-3 gap-4">
            <div>
              <strong class="no-wrap">单位名称:</strong>
              <span class="auto-wrap">{{ selectedItem.PREPARATION_DEPARTMENT }}</span>
            </div>
            <div>
              <strong class="no-wrap">机构代码:</strong>
              <span class="auto-wrap">{{ selectedItem.DEPARTMENT_CODE }}</span>
            </div>
            <div>
              <strong class="no-wrap">法定代表人:</strong>
              <span class="auto-wrap">{{ selectedItem.DEPARTMENT_REP }}</span>
            </div>
            <!--  -->
            <div>
              <strong class="no-wrap">联系电话:</strong>
              <span class="auto-wrap">{{ selectedItem.DEPARTMENT_REP_PHONE }}</span>
            </div>
            <div>
              <strong class="no-wrap">联系人:</strong>
              <span class="auto-wrap">{{ selectedItem.DEPARTMENT_PER }}</span>
            </div>
            <div>
              <strong class="no-wrap">联系电话:</strong>
              <span class="auto-wrap">{{ selectedItem.DEPARTMENT_PER_PHONE }}</span>
            </div>
            <!--  -->
            <div>
              <strong class="no-wrap">传真：</strong>
              <span class="auto-wrap">{{ selectedItem.DEPARTMENT_FAX }}</span>
            </div>
            <div>
              <strong class="no-wrap">电子邮箱：</strong>
              <span class="auto-wrap">{{ selectedItem.DEPARTMENT_E_MAIL }}</span>
            </div>
            <div>
              <strong class="no-wrap">地址：</strong>
              <span class="auto-wrap">{{ selectedItem.DEPARTMENT_ADDR }}</span>
            </div>
            <!--  -->
            <div>
              <strong class="no-wrap">预案名称：</strong>
              <span class="auto-wrap">{{ selectedItem.EMERGENCE_PLAN_NAME }}</span>
            </div>
            <div>
              <strong class="no-wrap">风险级别：</strong>
              <span class="auto-wrap">{{ selectedItem.PLAN_FILE1 }}</span>
            </div>
            <div>
              <strong class="no-wrap">报送单位：</strong>
              <span class="auto-wrap">{{ selectedItem.SUBMIT_DEPARTMENT }}</span>
            </div>
            <!--  -->
            <div>
              <strong class="no-wrap">备案部门：</strong>
              <span class="auto-wrap">{{ selectedItem.RECORD_DEPART }}</span>
            </div>
            <div>
              <strong class="no-wrap">备案部门性质：</strong>
              <span class="auto-wrap">{{ selectedItem.RECORD_DEPART_NATURE }}</span>
            </div>
            <div>
              <strong class="no-wrap">备案编号：</strong>
              <span class="auto-wrap">{{ selectedItem.RECORD_CODE }}</span>
            </div>
            <!--  -->
            <div>
              <strong class="no-wrap">预案文件：</strong>
              <span class="auto-wrap">{{ selectedItem.EMERGENCE_PLAN_ID }}</span>
              <el-button v-if="selectedItem.EMERGENCE_PLAN_ID" style="width: 75px; height: 30px;">
                <a :href="apiBaseUrl + '/download/' + selectedItem.EMERGENCE_PLAN_ID"
                  :download="selectedItem.EMERGENCE_PLAN_ID">下载查看</a>
              </el-button>
            </div>
            <div>
              <strong class="no-wrap">预案备案登记资料：</strong>
              <span class="auto-wrap">{{ selectedItem.PLAN_TO_RECORD_MATERIAL }}</span>
              <el-button v-if="selectedItem.PLAN_TO_RECORD_MATERIAL" style="width: 75px; height: 30px;">
                <a :href="apiBaseUrl + '/download/' + selectedItem.PLAN_TO_RECORD_MATERIAL"
                  :download="selectedItem.PLAN_TO_RECORD_MATERIAL">下载查看</a>
              </el-button>
            </div>
          </div>
          <!--  -->
          <div style="margin:10px 0">
            <strong class="no-wrap">突发环境事件应急预案备案目录：</strong>
            <span class="auto-wrap">{{ selectedItem.RECORD_CONTENTS }}</span>
          </div>
          <!--  -->
          <div style="margin:10px 0">
            <strong class="no-wrap">备案意见：</strong>
            <span class="auto-wrap">{{ selectedItem.RECORD_COMMENTS }}</span>
          </div>

        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import axios from 'axios'
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
import { exportData } from '#/utils/exportfile.js'
const apiBaseUrl = ref(proxy.$currentUrl + '/api')
// 搜索相关
const search = ref({
  EMERGENCE_PLAN_ID: "",
  EMERGENCE_PLAN_TYPE: '',
  EMERGENCE_PLAN_LEVEL: '',
  EMERGENCE_PLAN_NAME: ''
})
const formItems = ref([
  {
    label: '预案编码：:',
    model: 'EMERGENCE_PLAN_ID',
    type: 'input',
    placeholder: '请输入',
  },
  {
    label: '预案名称：',
    model: 'EMERGENCE_PLAN_NAME',
    type: 'select',
    placeholder: '请选择',
    options: [
      { label: '自然灾害', value: '自然灾害' },
      { label: '事故灾难', value: '事故灾难' },
      { label: '公共卫生时间', value: '公共卫生时间' },
      { label: '社会安全事件', value: '社会安全事件' },
      { label: '其他突发事件', value: '其他突发事件' },
    ],
  },
  {
    label: '预案类别：',
    model: 'EMERGENCE_PLAN_TYPE',
    type: 'select',
    placeholder: '请选择',
    options: [
      { label: '综合应急预案', value: '综合应急预案' },
      { label: '专项应急预案', value: '专项应急预案' },
      { label: '现场处置方案', value: '现场处置方案' },
      { label: '特殊时期/重大活动应急预案', value: '特殊时期/重大活动应急预案' },
    ],
  },
  {
    label: '预案等级：',
    model: 'EMERGENCE_PLAN_LEVEL',
    type: 'select',
    placeholder: '请选择',
    options: [

      { label: '上级应急预案', value: '上级应急预案' },
      { label: '园区级应急预案', value: '园区级应急预案' },
      { label: '企业级应急预案', value: '企业级应急预案' },

    ],
  },
])
const tabledata = ref('水')
const rowKey = (row) => row.ID
const loading = ref(false)
const handleSelectionChange = (selected) => {
  selectedIds.value = selected
}
const headerCellStyle = {
  height: '30px', // 设置表头高度
  lineHeight: '30px', // 设置行高以垂直居中
  backgroundColor: '#f2f2f2', // 可选：设置背景颜色
  // fontSize: '16px', // 可选：设置字体大小
}
// 数据相关
const tablearr = [
  {
    name: '水',
    apiurl: 'data-water'
  },
  {
    name: '污水',
    apiurl: 'data-sewage'
  },
  {
    name: '电力',
    apiurl: 'data-electricity'
  },
  {
    name: '天然气',
    apiurl: 'data-gas'
  },
  {
    name: '供热',
    apiurl: 'gongre'
  },
  {
    name: '有毒气体',
    apiurl: 'data-toxic-gas'
  },


]
const planData = ref([])
const isViewDialogOpen = ref(false)
const selectedItem = ref(null)
const selectedIds = ref([])
const displayedPlanData = ref([])
const alltabledata = (data) => {
  displayedPlanData.value = data
}
// API 调用函数
const searchPlans = (name) => {
  displayedPlanData.value = []
  try {

    tablearr.forEach(async element => {
      if (element.name == tabledata.value) {
        const response = await axios.get(`${apiBaseUrl.value}/${element.apiurl}`)
        planData.value = response.data.map(app => ({ ...app, selected: false }))
        selectedIds.value = []
      }
    })
  } catch (error) {
    console.error('搜索记录失败:', error)
    alert('搜索记录失败')
  }
}
// 事件处理函数
const resetSearch = () => {
  search.value = {
    EMERGENCE_PLAN_ID: '',
    EMERGENCE_PLAN_TYPE: '',
    EMERGENCE_PLAN_LEVEL: '',
    EMERGENCE_PLAN_NAME: '',
  }
  searchPlans()
}


const viewDetails = (item) => {
  selectedItem.value = { ...item }
  isViewDialogOpen.value = true
}

const closeViewDialog = () => {
  isViewDialogOpen.value = false
  selectedItem.value = {}
}


const cltabs = (data) => {
  tabledata.value = data.name

  searchPlans(data)
}




// 生命周期钩子
onMounted(() => {
  searchPlans()
})

</script>

<style scoped>
/* 移除所有现有的样式 */
</style>
